<template>
  <q-input
    label="点位类型"
    @click="show"
    :model-value="poseTypes[modelValue] || modelValue"
    readonly
  >
    <q-dialog v-model="visible">
      <q-card>
        <q-card-section class="flex items-center">
          <div class="text-h6">点位类型选择</div>
          <q-space />
          <q-btn
            label="无类型"
            color="primary"
            icon="clear"
            @click="choose(null)"
          />
        </q-card-section>
        <q-separator />
        <q-card-section>
          <q-expansion-item
            popup
            default-opened
            icon="forklift"
            label="工位点 & 库位点"
            caption="运输机器人执行任务的点位"
          >
            <div class="flex q-pa-md q-gutter-md justify-center">
              <q-btn
                icon="forklift"
                label="工位点（顶升）"
                color="primary"
                @click="choose('station-lift')"
              />
              <q-btn
                icon="warehouse"
                label="工位点（立体库）"
                color="primary"
                @click="choose('station-port')"
              />
              <q-btn
                icon="precision_manufacturing"
                label="工位点（抓取）"
                color="primary"
                @click="choose('station-catch')"
              />
              <q-btn
                icon="grid_on"
                label="库位点（抓取）"
                color="secondary"
                @click="choose('storage-catch')"
              />
            </div>
          </q-expansion-item>
          <q-expansion-item
            popup
            default-opened
            icon="place"
            label="任务与调度点位"
            caption="在任务执行完成和调度过程中使用的点位"
          >
            <div class="flex q-pa-md q-gutter-md justify-center">
              <q-btn
                icon="place"
                label="待命点"
                color="primary"
                @click="choose('standby')"
              />
              <q-btn
                icon="local_parking"
                label="停车位"
                color="primary"
                @click="choose('parking-spot')"
              />
              <q-btn
                icon="battery_charging_full"
                label="充电桩点位"
                color="secondary"
                @click="choose('charger')"
              />
              <q-btn
                icon="fork_left"
                label="避让点"
                color="secondary"
                @click="choose('avoid')"
              />
            </div>
          </q-expansion-item>
          <q-expansion-item
            popup
            icon="layers"
            label="跨地图逻辑点位"
            caption="与跨地图导航相关的点位"
          >
            <div class="flex q-pa-md q-gutter-md justify-center">
              <q-btn
                icon="layers"
                label="传送点（同层）"
                color="primary"
                @click="choose('teleport')"
              />
              <q-btn
                icon="elevator"
                label="传送点（电梯点）"
                color="secondary"
                @click="choose('teleport-elevator')"
              />
            </div>
          </q-expansion-item>
          <q-expansion-item
            popup
            icon="speed"
            label="交互与控制点位"
            caption="这些点位可以影响机器人的运动"
          >
            <div class="flex q-pa-md q-gutter-md justify-center">
              <q-btn
                icon="speed"
                label="速度控制点"
                color="primary"
                @click="choose('speed')"
              />
              <q-btn
                icon="sensors"
                label="避障控制点"
                color="primary"
                @click="choose('narrow')"
              />
              <q-btn
                icon="lightbulb"
                label="反光柱参考点"
                color="primary"
                @click="choose('reflector')"
              />
              <q-btn
                icon="door_sliding"
                label="闸门控制点"
                color="secondary"
                @click="choose('gate')"
              />
            </div>
          </q-expansion-item>
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-input>
</template>

<script>
import { inject, ref } from "vue";

export default {
  name: "PoseTypeSelector",
  props: {
    modelValue: String,
  },
  setup(props, context) {
    const visible = ref(false);
    const poseTypes = {};
    inject("poseTypes").forEach((item) => {
      poseTypes[item.value] = item.label;
    });
    return {
      visible,
      poseTypes,
      show() {
        visible.value = true;
      },
      choose(poseType) {
        context.emit("update:modelValue", poseType);
        visible.value = false;
      },
    };
  },
};
</script>
